<template>
	<view class="af">
		<view style="flex: 1;">
			<view class="box">
				<view class="add_adress">
					<view class="add_adress_item">
						<view class="add_adress_title">收货人</view>
						<input type="text" v-model="name" placeholder="请输入收货人" placeholder-class="place" />
					</view>
				</view>
				<view class="add_adress">
					<view class="add_adress_item">
						<view class="add_adress_title">手机号码</view>
						<input type="number" @blur="check" v-model="phone" placeholder="请填写手机号码" placeholder-class="place" />
					</view>
				</view>
				<view class="add_adress" @tap="choosecity">
					<view class="add_adress_item">
						<view class="add_adress_title">收货地址</view>
						<input type="text" v-model="addressf" disabled="true" placeholder="点击选择收货地址" placeholder-class="place" />
					</view>
					<i class=" icon ">&#xe637;</i>
				</view>
				<view class="add_adress">
					<view class="add_adress_item">
						<view class="add_adress_title">详细地址</view>
						<input type="text" v-model="adress" placeholder="例: xxx号楼xxx室" placeholder-class="place" />
					</view>
				</view>
				<view class="add_adress">
					<view class="add_adress_item">
						<view class="add_adress_title add_adress_title_default">设为默认地址</view>
					</view>
					<switch color="#6BCC03" style="transform:scale(0.7)" @change="checkedSta"/>
				</view>
			</view>
		</view>
		<view class="save" @tap="saveadress">保存</view>
		<w-picker mode="region" :areaCode="['33', '3301', '330108']" :hideArea="false" @confirm="onConfirm" ref="region"
		 themeColor="#f00"></w-picker>
	</view>
</template>

<script>
	import wPicker from '@/components/w-picker/w-picker.vue';
	import {addressAdd} from '@/common/index.js';
	export default {
		components: {
			wPicker
		},
		// mounted() {
		// 	var pages = getCurrentPages();
		// 	console.log(pages);
		// 	this.pageBefore = pages[pages.length - 2].route;
		// 	console.log(this.pageBefore);
		// 	if (this.pageBefore == 'pageD/adress/adress') {
		// 		this.back = true
		// 	} else {
		// 		this.back = false
		// 	}
		// },
		data() {
			return {
				info: {},
				addressf:'',
				province:'',
				city: '',
				area:'',
				name: '',
				phone: '',
				adress: '',
				status:0,
				back: false
			};
		},
		methods: {
			checkedSta(e){
				let check = e.detail.value;
				this.status = check ? 1 : 0;
			},
			choosecity() {
				this.$refs.region.show()
			},
			onConfirm(e) {
				// console.log(e)
				this.addressf = e.result
				this.province = e.checkArr[0]
				this.city = e.checkArr[1]
				this.area = e.checkArr[2]
			},
			check() {
				if (!/^1[3456789]\d{9}$/.test(this.phone)) {
					this.toast('手机号格式不对')
					this.phone = ''
					return false
				}
			},
			saveadress() {
				const {name,phone,province,city,area,adress,status} = this;
				// console.log(name,phone,province,city,area,adress,status)
				let params = {
					name,
					mobile:phone,
					province,
					city,
					area,
					address:adress,
					status
				}
				if(!name){
					this.toast('请填写收货人!')
					return false;
				}
				if(!phone){
					this.toast('请填写手机号!')
					return false;
				}
				if(!city){
					this.toast('请选择地址!')
					return false;
				}
				if(!adress){
					this.toast('请填写详情地址!')
					return false;
				}
				uni.showLoading({
					title: '正在保存地址中'
				})
				addressAdd(params).then(res=>{
					if(res.code == 1){
						this.toast(res.msg);
						setTimeout(() => {
							uni.navigateBack({
								delta:1
							})
							uni.hideLoading()
						}, 2000)
					}else{
						this.toast(res.msg)
						uni.hideLoading()
					}
				}).catch()
				// setTimeout(() => {
				// 	console.log(this.back);
				// 	if (this.back) {
				// 		uni.redirectTo({
				// 			url: '/pageD/adress/adress'
				// 		})
				// 	} else {
				// 		uni.redirectTo({
				// 			url: '/pageB/order/confirmorder'
				// 		})
				// 	}
				// 	uni.hideLoading()
				// }, 1000)
			}
		}
	};
</script>

<style>
	page {
		background-color: #F9F9F9;
		height: 100%;
	}
</style>
<style lang="less" scoped>
	.place{
		color: #999;
	}
	uni-page-body{
		height:100%;
	}
	.af{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow-x: hidden;
		width: 100%;
		height: 100%;
	}
	.box {
		width: 100%;
		background-color: #ffffff;
		padding: 0 30upx;
		box-sizing: border-box;
	}

	.add_adress {
		width: 100%;
		height: 118upx;
		border-bottom: 2upx solid #f9f9f9;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.add_adress_item {
			display: flex;
			align-items: center;

			input {
				width: 520upx;
				font-size: 28upx;
				color: #333333;
			}

			.add_adress_title {
				width: 140upx;
				font-size: 28upx;
				color: #333;
			}

			.add_adress_title_default {
				width: 200upx;
			}
		}

		.icon {
			font-size: 28upx;
			color: #999;
		}
	}

	.add_adress:last-child {
		border-bottom: none;
	}

	.save {
		width: calc(100% - 60upx);
		height: 90upx;
		margin: 30upx auto;
		background: #FF2842;
		border-radius: 8upx;
		font-size: 32upx;
		color: #ffffff;
		text-align: center;
		line-height: 90upx;
	}
</style>
